<template>
  <el-table :data="tableData" style="width: 100%" @selection-change="handleSelectionChange">
    <el-table-column type="selection" width="55" />
    <el-table-column prop="color" label="Order" />
    <el-table-column prop="date" label="Date" />
    <el-table-column prop="name" label="Customer" />
    <el-table-column prop="name" label="Payment Status">
      <template #default="scope">
        <el-tag type="success" disable-transitions>{{ scope.row.tag }}</el-tag>
      </template>
    </el-table-column>
    <el-table-column prop="name" label="Order Status">
      <template #default="scope">
        <el-tag type="success" disable-transitions>{{ scope.row.tag }}</el-tag>
      </template>
    </el-table-column>
    <el-table-column prop="name" label="Total" />
    <el-table-column prop="address" label="Address" />
  </el-table>
</template>

<script setup>
  const props = defineProps({
    tableData: {
      type: Array,
      default: () => [],
    },
    handleSelectionChange: {
      type: Function,
      default: () => {},
    },
  })
</script>
